<script>
import {
  calculateDiffPer,
  formatDateToDay, getSameDateComparison,
  getStoreOptions
} from "@/views/store/tb/api";

export default {
  name: "sameDateComparisonV2",
  data() {
    return {
      show: false,
      query: {
        storeName: "",
        contrastUnit: "",
        contrastRelation: "",
        dataCycle: []
      },
      queryRules: {
        storeName: [
          { required: true, message: "请输入活动名称" }
        ],
        contrastUnit: [
          { required: true, message: "请选择对比单位" }
        ],
        contrastRelation: [
          { required: true, message: "请选择对比关系" }
        ],
        dataCycle: [
          { required: true, message: "请选择数据周期" }
        ]
      },
      options: {
        storeNameLoading: false,
        storeName: [],
        contrastUnit: [
          { label: "日", value: "DAY" },
          { label: "周", value: "WEEK" },
          { label: "月", value: "MONTH" }
        ],
        contrastRelation: [
          { label: "同期", value: "TQ" },
          { label: "邻期", value: "LQ" }
        ],
        dataCycle: {
          shortcuts: [{
            text: "近7天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          }, {
            text: "近30天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          }]
        }
      },
      table: {
        columns: [],
        data: []
      }
    };
  },
  methods: {
    // 格式化差值百分比
    formatDiffPer(row, index, label) {
      if (label === "指数名") {
        return null;
      }
      let r = this.table.columns.length > index + 7;
      if (r) {
        return calculateDiffPer(row[label], row[this.table.columns[index + 7].label]);
      } else {
        return null;
      }
    },
    diffPerToStyle(per) {
      if (per > 0) {
        return { color: "#ff4757" };
      } else if (per < 0) {
        return { color: "#2ecc71" };
      }
    },
    storeOptions() {
      this.options.storeNameLoading = true;
      getStoreOptions(this, function(r) {
        this.options.storeName = r;
      }.bind(this), function(f) {
        this.options.storeNameLoading = false;
      }.bind(this));
    },
    requestData() {
      this.$refs["queryForm"].validate(function(valid) {
        if (valid) {
          this.getList();
        } else {
          return false;
        }
      }.bind(this));
    },
    getList() {
      if (this.query.contrastUnit !== '日'){
        this.$message.warning("选择周/月时,只会统计已存在的数据,比如可能会出现某天数据不存在的情况那么这天所在的周就只统计6天数据")
      }
      let params = {
        storeName: this.query.storeName,
        startDate: formatDateToDay(this.query.dataCycle[0]),
        endDate: formatDateToDay(this.query.dataCycle[1]),
        unit: this.query.contrastUnit,
        relation: this.query.contrastRelation
      };
      getSameDateComparison(this, params, function(r) {
        this.table.columns = r.columns;
        this.table.data = r.tableData;
        console.log(this.table.data);
        this.$nextTick(() => {
          this.$refs["tb"].doLayout();
        });
      }.bind(this), function(f) {

      }.bind(this));
    }
  }
};
</script>

<template>
  <div style="display: inline-block">
    <el-button size="mini" type="primary" @click="show = true">周期对比</el-button>
    <el-dialog title="周期对比" :visible.sync="show" :fullscreen="true">
      <div>
        <div>
          <el-form :model="query" :inline=true size="mini" ref="queryForm" :rules="queryRules">
            <el-form-item label="店铺名称" prop="storeName">
              <el-select
                v-model="query.storeName"
                placeholder="请选择店铺名称"
                :filterable=true
                clearable
                @focus="storeOptions"
                :loading="options.storeNameLoading"
                loading-text="加载中"
              >
                <el-option
                  v-for="item in options.storeName"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="对比单位" prop="contrastUnit">
              <el-select
                v-model="query.contrastUnit"
                placeholder="请选择对比单位"
                :filterable=true
                clearable
              >
                <el-option
                  v-for="item in options.contrastUnit"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="对比关系" prop="contrastRelation">
              <el-select
                v-model="query.contrastRelation"
                placeholder="请选择对比关系"
                :filterable=true
                clearable
              >
                <el-option
                  v-for="item in options.contrastRelation"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="数据周期" prop="dataCycle">
              <el-date-picker
                v-model="query.dataCycle"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="options.dataCycle">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="success" @click="requestData">请求数据</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div>
          <el-table
            :data="table.data"
            height="83vh"
            ref="tb"
          >
            <el-table-column
              v-for="(item,index) in table.columns"
              :label="item.label"
              :prop="item.label"
              :width="item.width"
              :fixed="item.fixed ? item.fixed : undefined"
            >
              <template slot-scope="{row}">
                <span style="font-weight: bold;font-size: 15.5px">{{ row[item.label].value }}</span>
                <div style="display: inline-block" :style="diffPerToStyle(row[item.label].percentage)">
                  <span
                    v-if="row[item.label].percentage"
                    style="margin-left: 5px;font-size: 13px">
                  {{ row[item.label].percentage + "%" }}
                </span>
                  <span
                    v-if="row[item.label].poor"
                    style="margin-left: 5px;font-size: 12px;font-weight: bold">
                    {{ row[item.label].poor }}
                  </span>
                </div>

              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>